<template>
  <div>
    <h3>门店修改</h3>
    <table class="table table-border">
      <tbody>
        <tr>
          <td align="right">门店名称</td>
          <td><input type="text" v-model="info.shopName" /></td>
        </tr>
        <tr>
          <td align="right">分店名称</td>
          <td><input type="text" v-model="info.branchName" /></td>
        </tr>
        <tr>
          <td align="right">门店图片</td>
          <td>
            <input type="file" @change="img" />
            <img
              :src="info.photo"
              width="100"
              height="100"
              v-if="info.photo != ''"
            />
          </td>
        </tr>
        <tr>
          <td align="right">开业时间</td>
          <td><input type="date" v-model="info.openTime" /></td>
        </tr>
        <tr>
          <td align="right">门店状态</td>
          <td>
            <input
              type="radio"
              name="state"
              v-model="info.state"
              :value="true"
            />开启<input
              type="radio"
              name="state"
              v-model="info.state"
              :value="false"
            />禁用
          </td>
        </tr>
        <tr>
          <td align="right">门店特色</td>
          <td>
            <input
              type="checkbox"
              name="tese"
              v-model="info.teSe"
              value="婚宴"
            />婚宴
            <input
              type="checkbox"
              name="tese"
              v-model="info.teSe"
              value="升学宴"
            />升学宴
            <input
              type="checkbox"
              name="tese"
              v-model="info.teSe"
              value="满月宴"
            />满月宴
            <input
              type="checkbox"
              name="tese"
              v-model="info.teSe"
              value="彭于晏"
            />彭于晏
          </td>
        </tr>
        <tr>
          <td align="right">联系电话</td>
          <td><input type="text" v-model="info.tel" maxlength="11" /></td>
        </tr>
        <tr>
          <td align="right">门店简介</td>
          <td>
            <textarea cols="50" rows="5" v-model="info.desc"></textarea>
          </td>
        </tr>
        <tr>
          <td align="right">门店地址</td>
          <td>
            <select v-model="info.addressId">
              <option value="">请选择</option>
              <option :value="item.id" v-for="item in addRessList">
                {{ item.addressName }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">门店类型</td>
          <td>
            <select v-model="info.shopType">
              <option value="">请选择</option>
              <option value="普通酒店">普通酒店</option>
              <option value="豪华酒店">豪华酒店</option>
              <option value="竞技酒店">竞技酒店</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="确定"
              class="btn btn-success"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();

//门店增加时向后端传递的数据
let info: any = reactive({
  id: route.query.id,
  shopName: '',
  branchName: '',
  photo: '',
  openTime: '',
  state: true,
  teSe: [],
  tel: '',
  desc: '',
  addressId: '',
  shopType: '',
});

//声明变量接受地址列表
const addRessList: any = ref([]);

onMounted(() => {
  getData();
  getDataShop();
});

//2.修改返填
const getDataShop = () => {
  axios({
    url: '/api/Shops/GetShopModelItem',
    method: 'get',
    params: {
      id: route.query.id,
    },
  })
    .then((res) => {
      console.log(res);
      Object.assign(info, res.data);
      info.openTime = res.data.openTime.substring(0, 10);
      info.teSe = res.data.teSe.split(',');
    })
    .catch((err) => {
      console.log(err);
    });
};

//修改操作
const ok = () => {
  //1.有效性判断
  if (info.shopName == '') {
    alert('门店名称不能为空');
    return;
  }
  if (info.branchName == '') {
    alert('分店名称不能为空');
    return;
  }
  if (info.photo == '') {
    alert('图片不能为空');
    return;
  }
  if (info.openTime == '') {
    alert('开业时间不能为空');
    return;
  }
  if (info.teSe.length == '') {
    alert('门店特色必选');
    return;
  }
  if (info.tel == '') {
    alert('联系电话不能为空');
    return;
  }
  if (info.desc == '') {
    alert('简介不能为空');
    return;
  }
  if (info.desc.length > 50) {
    alert('简介的长度不能超过50');
    return;
  }
  if (info.addressId == '') {
    alert('地址必选');
    return;
  }
  if (info.shopType == '') {
    alert('酒店类型必选');
    return;
  }
  //2.发送网络请求
  info.teSe = info.teSe.toString();
  axios({
    url: '/api/Shops/UpdateShopOk',
    method: 'put',
    data: info,
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('修改成功');
        router.push('/shopList');
        return;
      }
      if (res.data == -1) {
        alert('门店名重复');
        return;
      } else {
        alert('门店修改失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//获取地址
const getData = () => {
  axios({
    url: '/api/Shops/GetAddresses',
    method: 'get',
  })
    .then((res) => {
      console.log(res);
      addRessList.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//前端的图片上传
const img = (e: any) => {
  //e:表示事件对象  只要触发事件就会存在事件对象
  //获取上传的文件
  let obj = e.target.files[0];
  //将上传的文件转成formData格式  转成表单对象并且是键值对形式
  let f = new FormData(); //创建空的表单对象
  f.append('file', obj);

  //发送网络请求实现图片上传
  axios({
    url: '/api/Imgs/Img',
    method: 'post',
    data: f,
  })
    .then((res) => {
      console.log(res);
      if (res.data == '不是图片') {
        alert('您上传的不是图片');
        return;
      }

      if (res.data == '大于2M') {
        alert('您上传的图片大于2M');
        return;
      }

      //上传成功
      info.photo = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
